<template>
  <view class="x-banner" :style="[componentStyle]">
    <swiper
      :class="['swiper', {'card': isCard}]"
      :previous-margin="swiperItemMargin"
      :next-margin="swiperItemMargin"
      indicator-color="rgba(255, 255, 255, 0.5)"
      indicator-active-color="rgba(255, 255, 255, 0.8)"
      circular
      autoplay
      :interval="interval"
      :style="[swiperStyle]"
      @change="handleChange"
      @touchend.stop
    >
      <block v-for="(item,index) in detail.componentContentList" :key="index">
        <swiper-item :class="['swiper-item', {active: activeIndex === index}]" @click="handleClickSwiperItem(item)">
          <view :class="['swiper-item-content',{'round-border': detail.componentStyle.borderRadius === 1}]">
            <image class="swiper-image" mode="aspectFill" :src="item.imgUrl" />
            <view v-if="item.title" class="title">{{ item.title }}</view>
          </view>
        </swiper-item>
      </block>
    </swiper>

    <block v-if="showIndicatorDots">
      <view :class="['swiper-dots',  {'card': isCard}]" :style="{bottom: `${14 + padding}rpx`, right: `${24 + padding}rpx`}">
        {{activeIndex+1}}/{{detail.componentContentList.length}}
      </view>
    </block>
  </view>
</template>

<script>
import formatStyle from '@/utils/x-format-style';
import navigateTo from '@/utils/x-navigate';
export default {
  name: 'HBanner',
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    },
    groupsSource: {
      type: [String, null],
      default: ''
    }
  },
  data() {
    return {
      componentStyle: {},
      swiperStyle: {},
      activeIndex: 0
    };
  },
  computed: {
    isCard() {
      return this.detail.templateType === 23;
    },
    interval() {
      return this.detail?.componentStyle.interval * 1000;
    },
    showIndicatorDots() {
      return this.detail?.componentContentList?.length > 1;
    },
    swiperItemMargin() {
      return this.isCard ? '50rpx' : '0rpx';
    },
    padding() {
      return (this.detail?.componentStyle.padding || 0) * 2;
    }
  },
  watch: {},
  created() {
    this.handleComponentStyle();
  },
  methods: {
    handleChange({ detail: { current }}) {
      this.activeIndex = current;
    },

    handleClickSwiperItem(item) {
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source,
        groupsSource: this.groupsSource
      });
      this.$XTrack('onBannerEvent', {
        componentId: item.componentId,
        bannerId: item.bannerId
      });
    },

    handleComponentStyle() {
      const { contentStyle: { width, height }} = this.detail?.componentContentList[0];
      const { componentStyle } = this.detail;
      this.componentStyle = formatStyle(componentStyle, ['marginBottom', 'padding', 'backgroundColor']);
      if (!this.isCard && width && height) {
        const actualWidth = 750 - componentStyle.padding * 2 * 2;
        this.swiperStyle = {
          width: `${actualWidth}rpx`,
          height: `${actualWidth * height / width}rpx`
        };
      }
    }
  }
};
</script>

<style scoped lang="scss">
  .x-banner{
    position: relative;
    .swiper{
      height: 360px;

      &.card{
        height: 300px;
        .swiper-item{
          .swiper-item-content{
            transition: transform .4s;
          }
          &:not(.active){
            .swiper-item-content{
              transform: scale(0.94, 0.86);
            }
          }
        }
      }
    }

    .swiper-item{
      .swiper-item-content{
        width: 100%;
        height: 100%;
        overflow: hidden;

        &.round-border{
          border-radius: 10px;

          .title{
            border-radius: 0 0 10px 10px;
          }
        }

        .swiper-image{
          width: 100%;
          height: 100%;
        }
      }

      .title{
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 10px 125px 10px 24px;
        color: #fff;
        width: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 30px;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        line-height: 1.2;
      }
    }

    .swiper-dots{
      position: absolute;
      bottom: 14px;
      right: 24px;
      color: #ffffff;
      padding: 0 16px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 36px;

      &.card{
        right: 72px!important;
      }
    }
  }
</style>
